<template>
  <view
    class="chat-message-item"
    :class="rootClassMap"
  >
    <view
      class="chat-message-item__head"
      @click="$emit('click-head')"
    >
      <image
        class="chat-message-item__head-image"
        :src="head"
      ></image>
    </view>
    <view
      class="chat-message-item__content"
      @click="$emit('click-content')"
      @longtap="$emit('longtap-content')"
    >
      <template v-if="isText">{{data.data}}</template>
      <image
        v-else-if="isTipFace"
        :hack="getLocalImage()"
        :src="imagePath"
        :style="imageSize"
        @load="onImageLoaded"
      ></image>
      <image
        v-else-if="isImage"
        :hack="getLocalImage()"
        :src="imagePath"
        :style="imageSize"
        @load="onImageLoaded"
				@click="viewImage"
      ></image>
      <view
        v-else-if="isAudio"
        class="chat-mess-item__content-isAudio"
        :style="audioSize()"
        @click="playAudio"
      >
        <view class="audio-box">
          <image
            class="audio-box__image"
            :class="{
              'is-play': audioPlaying
            }"
            src="../static/icon_audio.png"
            mode="aspectFit"
          ></image>
        </view>
        <text class="length">
          {{(data.payload.timeLength / 1000).toFixed(0)}}"
        </text>
      </view>
      <view
        v-else-if="isVideo"
        class="chat-mess-item__content-isVideo"
        @click="viewVideo"
      >
        <image class="play-btn" src="../static/icon_btn_play.png"></image>
        <image
          :hack="getVideoImage()"
          :src="imagePath"
          :style="imageSize"
          @load="onImageLoaded"
        ></image>
      </view>
      <view
        v-else-if="isLocation"
        class="chat-mess-item__content-isLocation"
        @click="viewLocation"
      >
        <image
          class="image-elm"
          :src="imagePath"
          :hack="getLocationImage()"
        ></image>
        <text
          class="desc-elm"
          v-text="data.payload.addr || '定位信息'"
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      self: { type: Boolean, default: false },
      head: { type: String },
      tip: { type: String },
      type: { type: String },
      data: {  },
    },
    data () {
      return {
        imageSize: {
          width: 0,
          height: 0
        },
        audioPlaying: false,
        imagePath: '',
      }
    },
    beforeMount() {
      if (this.isImage) {
        let detail = this.data.payload.elem.imageList[0]
        this.onImageLoaded({ detail })
      }
    },
    computed: {
      rootClassMap() {
        return {
          'is-self': this.self,
          'is-media': this.media
        }
      },
      media () {
        let { MSG_TEXT, MSG_AUDIO } = this.$imUtils
        return [MSG_TEXT, MSG_AUDIO].indexOf(this.type) < 0
      },
      isText () {
        return this.type === this.$imUtils.MSG_TEXT
      },
      isTipFace () {
        return this.type === this.$imUtils.MSG_TIP_FACE
      },
      isImage () {
        return this.type === this.$imUtils.MSG_IMAGE
      },
      isVideo () {
        return this.type === this.$imUtils.MSG_VIDEO
      },
      isAudio () {
        return this.type === this.$imUtils.MSG_AUDIO
      },
      isLocation () {
        return this.type === this.$imUtils.MSG_LOCATION
      }
    },
    mounted () {
    },
    methods: {
      onImageLoaded ({ detail }) {
        let { screenWidth, screenHeight } = uni.getSystemInfoSync()
        let maxWidth = screenWidth / 2
        let maxHeight = screenWidth / 1.5
        let wPercent = detail.width / maxWidth
        let hPercent = detail.height / maxHeight
        let width, height;
        if (wPercent > hPercent) {
          width = wPercent > 1 ? maxWidth : detail.width
          height = wPercent > 1 ?
                     maxWidth / detail.width * detail.height
                    :detail.height
        } else {
          height = hPercent > 1 ? maxHeight : detail.height
          width  = hPercent > 1 ?
                   maxHeight / detail.height * detail.width
                  :detail.width
        }
        this.imageSize.width = width + 'px'
        this.imageSize.height = height + 'px'
      },
      audioSize () {
        let { screenWidth } = uni.getSystemInfoSync()
        let maxWidth = screenWidth - 100
        let width = this.data.payload.timeLength / 60000 * maxWidth
        if (width < 60) {
          width = 60
        }
        return {
          width: width + 'px'
        }
      },
			viewImage () {
        this.$imUtils.stopAudio()
				uni.previewImage({
					urls: [this.data.data]
				})
			},
      async viewVideo () {
        this.$imUtils.stopAudio()
        let urlPath = '_doc/' + this.data.data.elem.videoUUID
        let resolvePath = plus.io.convertLocalFileSystemURL(urlPath)
        let ret = await this.$imUtils.isExsits(resolvePath)
        if (!ret.size) {
          uni.showLoading({ title: '下载中' })
          await this.$txim.downloadVideo(this.data.data.msgID, resolvePath)
        }
        uni.navigateTo({
        	url: `../pages/inline/videoPlayer?link=${urlPath}`
        })
        uni.hideLoading()
      },
			async playAudio () {
        if (this.audioPlaying) {
          this.$imUtils.stopAudio()
          return
        }
        let urlPath = '_doc/' + this.data.payload.elem.uuid
        let resolvePath = plus.io.convertLocalFileSystemURL(urlPath)
        let ret = await this.$imUtils.isExsits(resolvePath)
        if (!ret.size) {
          await this.$txim.downloadSound(this.data.payload.msgID, resolvePath)
        }
        this.$imUtils.stopAudio()
        this.audioPlaying = true
				this.$imUtils.playAudio(urlPath, e => {
				  this.audioPlaying = false
        })
			},
      async getVideoImage () {
        this.onImageLoaded({
          detail: {
            width: this.data.data.elem.snapshotWidth,
            height: this.data.data.elem.snapshotHeight,
          }
        })
        let urlPath = '_doc/' + this.data.data.elem.snapshotUUID
        let resolvePath = plus.io.convertLocalFileSystemURL(urlPath)
        let ret = await this.$imUtils.isExsits(resolvePath)
        if (!ret.size) {
          await this.$txim.downloadSnapshot(this.data.data.msgID, resolvePath)
        }
        this.imagePath = urlPath
      },
      async getLocationImage () {
        let { lat, lon, addr } = this.data.payload
        let url = await this.$imUtils.getLocationImage(lat, lon)
        let filePath = await this.$imUtils.downloadFile(url)
        this.imagePath = filePath || url
      },
      viewLocation () {
        let { lat, lon, addr } = this.data.payload
        this.$imUtils.openLocation(lat, lon, addr)
      },
      async getLocalImage () {
        let filePath = await this.$imUtils.downloadFile(this.data.data)
        this.imagePath = filePath || url
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./common";
  .chat-message-item {
    @extend .flex;
    padding: 11px;
    align-items: flex-start;
    justify-content: flex-start;
    .chat-message-item__head {
      @extend .flex-shrink;
      width: 38px;
      height: 38px;
      .chat-message-item__head-image {
        width: 38px;
        height: 38px;
        border-radius: $br-radius;
      }
    }
    .chat-message-item__content {

      position: relative;
      margin-left: 10px;
      margin-right: 49px;
      padding: 8.5px;
      font-size: $fz-default;
      line-height: 1.5;
      border-radius: $br-radius;
      background-color: $c-white;
      word-break: break-all;
      & {
        &::v-deep{
          max-width: 100% !important;
        }
      }
      &:before {
        content: '';
        position: absolute;
        left: -4.5px;
        top: 14.5px;
        border-left: 0;
        border-top: 4.5px solid transparent;
        border-bottom: 4.5px solid transparent;
        border-right: 4.5px solid #fff;
      }
      image {
        border-radius: $br-radius;
      }
    }

    $self-color: #9FF070;
    &.is-self {
      flex-direction: row-reverse;
      .chat-message-item__head {
      }
      .chat-message-item__content {
        margin-left: 49px;
        margin-right: 10px;
        background-color: $self-color;
        &:before {
          left: auto;
          right: -4.5px;
          border-right: 0;
          border-left: 4.5px solid $self-color;
        }
      }
    }

    &.is-media {
      .chat-message-item__content {
        @extend .flex-shrink;
        flex-grow: 0;
        width: auto;
        padding: 0;
        background-color: transparent;
        &:before {
          display: none;
        }
      }
    }
  }

  .chat-mess-item__content-isVideo {
    position: relative;
    .play-btn {
      z-index: 2;
      position: absolute;
      width: 40px;
      height: 40px;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
    }
  }

  .chat-mess-item__content-isAudio {
    @extend .flex;
    justify-content: flex-start;
    .audio-box {
      position: relative;
      $audioIconWidth: 12px;
      margin-right: 10px;
      &, .audio-box__image {
        width: $audioIconWidth;
        height: 16px;
        overflow: hidden;
      }
      .audio-box__image.is-play {
        animation: audioBoxImageAni .8s infinite;
        @keyframes audioBoxImageAni {
          0% { width: 0px; }
          100% { width: $audioIconWidth; }
        }
      }
      .length {
        padding-left: 10px;
      }
    }
  }

  .chat-mess-item__content-isLocation {
    @extend .flex;
    @extend .flex-column;
    border-radius: $br-radius;
    background-color: $c-white;
    width: 200px;
    height: 200px;
    .image-elm {
      width: 200px;
      height: 200px;
    }
    .desc-elm {
      @extend .base-class;
      @include _text-n(1);
      width: 100%;
      padding: 5px;
      color: $c-black;
    }
  }
</style>
